<template>
  <!-- 搜索框 -->
  <view class="searchContent">
    <!-- 搜索组件 -->
    <SearchGoodsM style="width: 98%;"></SearchGoodsM>
  </view>

  <!-- 商品类型 -->
  <view class="u-wrap">
    <view class="u-menu-wrap">
      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-into-view="itemId">
        <view v-for="(item, index) in goodsTypes" :key="item.key" class="u-tab-item"
          :class="[current == item.key ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(item.key)">
          <text class="u-line-1">{{ item.value }}</text>
        </view>
      </scroll-view>
      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box">
        <view class="page-view">
          <view :id="'item' + index" v-for="(item, index) in goodsData" :key="index">
            <uni-list>
              <uni-list-item :title="item.name" note="价格" :thumb="getImgFullUrl(item.imgs)" thumb-size="lg" rightText="购买" />
            </uni-list>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import SearchGoodsM from '../commons/searchGoodsM.vue';
import { getMapBy, readImgUrl } from "@/api/comm";
import type { iDictInfo } from "@/interface/";
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { iGoodsList } from "@/interface";
import { getGoodsPage } from "@/api/shopping";
import { iPagination } from "@/interface";

// 获取图片全路径  [错误写法：const getImgFullUrl = computed((imgName: string) => readImgUrl + imgName)   ]
const getImgFullUrl = computed(() => {
  return (imgName: string) => imgName ? readImgUrl + imgName : ''
})
const scrollTop = ref(0); //tab标题的滚动条位置
const oldScrollTop = ref(0) // tab标题的滚动条旧位置
const current = ref('1') // 预设当前项的值
const menuHeight = ref(0) // 左边菜单的高度
const menuItemHeight = ref(0) // 左边菜单item的高度
const itemId = ref('') // 栏目右边scroll-view用于滚动的id

const arr = ref([]) // 储存距离顶部高度的数组
const scrollRightTop = ref(0) // 右边栏目scroll-view的滚动条高度
const timer = ref(null) // 定时器

const goodsTypes = ref<iDictInfo[]>([]);


// 获取字典数据-商品类型
async function getDictMapBy() {
  const data = {
    'type': 11
  }
  await getMapBy(data)?.then((res: any) => {
    if (0 == res.code) {
      goodsTypes.value = res.data;
    }
  })
  console.log(goodsTypes)
}
const maxNumFlag = ref(false) // 是否已是最大数据
// 临时中转商品集合（滚动加载更多）
const data = ref([]);
// 分页对象
const pageModel = ref<iPagination>({
  pageSize: 12,
  total: 1,
  current: 1,
  showQuickJumper: false,
  showSizeChanger: true,
  showTotal: (total: number) => `共${total}条`,
})

// 查询商品名称
const dvForm = reactive({
  name: '',
  type: '', // 商品类型
  sortCode: '',
  sortType:''
});
// 商品集合
const goodsData = ref([{
  id: 0,
  code: "",
  name: "",
  dictType: -1,
  dictTypeName: "",
  price: 0.00,
  discountPrice: 0.00,
  imgs: "",
  remark: "",
  buyNum: 0,
  packageFlag: 0,
}]);

// 商品查询
function searchGoods() {

let params = {
  pageNum: pageModel.value.current,
  pageSize: pageModel.value.pageSize,
}
if (maxNumFlag.value === true) {
  return;
}
getGoodsPage(params, dvForm)?.then((resp: any) => {
  if (0 == resp.code) {
    if (resp.data.records) {
      const newData = data.value.concat(resp.data.records);
      data.value = newData;
      goodsData.value = newData;

      if (resp.data.total === goodsData.value.length) {
        maxNumFlag.value = true;
      }
      // console.log("已加载数量：" + goodsData.value.length + "  总数量：" + resp.data.total + " maxNumFlag：" + maxNumFlag.value)
    }
  }
  else {
    console.error(resp.msg)
  }
})

}


// 左侧分类-切换
function swichMenu(classIndex: string) {
  current.value = classIndex;
  dvForm.type = classIndex;
  // goodsList.value = allGoodsList.filter(ele => ele.dictType === classIndex);
  maxNumFlag.value = false;
  pageModel.value.current=1;
  data.value = [];
  goodsData.value = [];
  searchGoods();
}

/**
* 获取一个目标元素的高度
* @elClass 元素的类名
* @dataVal 储存高度的对象
*/

function getElRect(elClass, dataVal) {
  new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery().in(this);
    query.select('.' + elClass).fields({
      size: true
    }, res => {
      // 如果节点尚未生成，res值为null，循环调用执行
      if (!res) {
        setTimeout(() => {
          this.getElRect(elClass);
        }, 10);
        return;
      }
      this[dataVal] = res.height;
      resolve();
    }).exec();
  })
}

// 页面加载
onLoad(() => {
  // 商品类型
  getDictMapBy();
  // 查询商品
  dvForm.type = current.value;
  searchGoods();
})

</script>


<style lang="less" scoped>
.img-item {
  width: 60px;
  height: 60px;
  display: flex;
}

.u-wrap {
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.u-search-box {
  padding: 18rpx 30rpx;
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #06A446;
  font-size: 30rpx;
  font-weight: 500;
  background: #D6FFE7;
}

.u-tab-item-active::before {
  content: "";
  position: absolute;
  border-left: 4px solid #06A446;
  height: 52rpx;
  left: 0;
  top: 29rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  padding: 16rpx;
}

.class-item {
  margin-bottom: 30rpx;

}

.class-item:last-child {
  min-height: 100vh;
}

.item-title {
  font-size: 26rpx;
  font-weight: bold;
}

.item-menu-name {
  margin-top: 8rpx;
  font-weight: normal;
  font-size: 24rpx;
}

.item-container {
  display: flex;
  flex-wrap: wrap;
}

.thumb-box {
  width: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20rpx;
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}
</style>